<template>
	<public-view :isTabbar="true" navType="my">
		<view class="content flex f-d-c a-i-c">
			<view class="user-info-box flex a-i-c">
				<image class="user-avatar" :src="userInfo?.avatar" mode=""></image>
				<view class="user-name-box flex f-d-c">
					<view class="name f-s-36 l-h-48 color-333">
						{{userInfo?.nickname||""}}
					</view>
					<view class="flex a-i-c color-999 f-s-24" @click="goTo({url:'/pages/my/userSetting'})">
						查看或编辑个人资料
						<image class="diog-next-icon" src="@/static/images/my/diog-next-icon.svg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="my-order-view flex a-i-c j-c-b" @click="goTo({url:'/pages/my/myOrderList'})">
				<view class="left flex f-d-c">
					<view class="title f-s-32 color-333 l-h-48">
						我的订单
					</view>
					<view class="f-s-24 color-333">
						共<text class="color-2567F3 f-s-28">{{userInfo?.order_count || 0}}</text>单
					</view>
				</view>
				<image class="next-page-icon" src="@/static/images/my/next-page.svg" mode=""></image>
			</view>
			<view class="my-money-box" @click="goTo({url:'/pages/my/moneyInfo'})">
				<view class="itme flex a-i-c j-c-b">
					<view class="f-s-44 color-fff f-w-b title">
						钱包
					</view>
					<image class="next-page-icon" src="@/static/images/my/white-next.svg" mode=""></image>
				</view>
				<view class="itme flex a-i-c j-c-b">
					<view class="color-fff80 f-s-24">
						账户余额(元)
					</view>
					<view class="money-right flex a-i-c">
						<view class="f-s-36 color-fff f-w-b">
							<block v-if="!hide_money">
								{{userInfo.money || 0}}
							</block>
							<block v-else>
								**********
							</block>
						</view>
						<image @click.stop="hide_money=!hide_money" class="next-page-icon mar-12" :src="`/static/images/my/${hide_money?'close-eyes':'eyes-money'}.svg`" mode=""></image>
					</view>
				</view>
			</view>
			<view class="my-card-box w-100 flex a-i-c j-c-b" style="flex-wrap: wrap; gap:30rpx 0;">
				<view class="item flex j-c-b a-i-c" @click="selectIsJoin(service_list[5],true)">
					<view class="left flex f-d-c j-c-b">
						<view class="title color-333 f-s-30">
							油站管理
						</view>
						<view class="color-B9B9B9 f-s-24">
							进入管理
						</view>
					</view>
					<image class="jiayou" src="@/static/images/my/jiayou.svg" mode=""></image>
				</view>
				
				<view class="item flex j-c-b a-i-c" @click="goTo({url:'/pages/my/giftShop'})">
					<view class="left flex f-d-c j-c-b">
						<view class="title color-333 f-s-30">
							礼品专区
						</view>
						<view class="color-B9B9B9 f-s-24">
							礼物专区
						</view>
					</view>
					<image class="gift-image" src="@/static/images/my/gift-image.svg" mode=""></image>
				</view>
				<view class="item flex j-c-b a-i-c" @click="goTo({url:'/pages/vip/index'})">
					<view class="left flex f-d-c j-c-b">
						<view class="title color-333 f-s-30">
							会员中心
						</view>
						<view class="color-B9B9B9 f-s-24">
							进入充值
						</view>
					</view>
					<image style="object-fit: cover;" class="jiayou" src="@/static/images/vip/vip-icon.png" mode=""></image>
				</view>
			</view>
			<view class="service-box">
				<view class="thumb-title color-333 f-w-b f-s-30">
					我的服务
				</view>
				<view class="service-list-box flex f-w-w j-c-b">
					<block v-for="(item, index) in service_list" :key="index">
						<view class="item flex f-d-c a-i-c j-c-c" @click="navUrl(item)">
							<image class="service-icon" :src="item.icon" mode=""></image>
							<view class="name color-666 f-s-20">
								{{item.name}}
							</view>
						</view>
					</block>
					<!-- <view class="item flex f-d-c a-i-c j-c-c" @click="goSwitch({url:'/pages/live/index/index'})">
						<image class="service-icon" src="" mode=""></image>
						<view class="name color-666 f-s-20">
							视频中心
						</view>
					</view> -->
					<view class="item flex f-d-c a-i-c j-c-c">
						<image class="service-icon" src="" mode=""></image>
						<view class="name color-666 f-s-20">
							
						</view>
					</view>
					<view class="item flex f-d-c a-i-c j-c-c">
						<image class="service-icon" src="" mode=""></image>
						<view class="name color-666 f-s-20">
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" slot="popup">
			<uni-popup type="bottom" ref="xieyi">
				<view class="xieyi-box flex f-d-c a-i-c">
					<view class="title f-s-28 f-w-b line-h-40">
						{{xieyi_name}}
					</view>
					<scroll-view scroll-y="true" class="popup-scroll">
						<rich-text class="f-s-28 color-333 l-h-56" :nodes="rich_text">
						</rich-text>
					</scroll-view>
					<!-- <view class="w-100" v-if="xieyi_name === '用户协议'">
						<label class="radio flex a-i-c">
							<checkbox value="" style="transform: scale(.5);" />
							<view class="f-s-24 flex a-i-c">
								我已阅读并同意 
								<view class="color-2567F3" @click.stop="goTo({url:'/pages/my/joinXieyi?title=入驻协议'})">
									《入驻协议》
								</view>
							</view>
						</label>
					</view> -->
					<view class="bottom-btn-box flex a-i-c f-s-30 w-100 j-c-a">
						<!-- <view class="item all-center btn1" @click="close(false)">
							取消
						</view> -->
						<view class="item all-center btn2" @click="close(true)">
							确定
						</view>
					</view>
					<view class="" style="height: 100rpx;">
						
					</view>
				</view>
			</uni-popup>
			
		</view>
	</public-view>
</template>

<script>
	import {goTo,goSwitch} from "@/nav.js"
	import {mapGetters} from "vuex"
	export default {
		data() {
			return {
				service_list:[
					{
						name:"加油记录",
						icon:"/static/images/my/jiayou.svg",
						url:"/pages/my/stationLog"
					},
					{
						name:"平台客服",
						icon:"/static/images/my/ptkf.svg",
						url:"",
						type:"phone"
					},
					{
						name:"用户协议",
						icon:"/static/images/my/yhxy.svg",
						url:""
					},
					{
						name:"意见反馈",
						icon:"/static/images/my/yjfk.svg",
						url:"/pages/my/backMsg"
					},
					{
						name:"关于我们",
						icon:"/static/images/my/gywm.svg",
						url:""
					},
					{
						name:"加油站入驻",
						icon:"/static/images/my/jyzrz.svg",
						url:"/pages/my/gasJoin",
						type:"1"
					},
					{
						name:"救援公司入驻",
						icon:"/static/images/my/jyrz.svg",
						url:"/pages/my/rescueJoin",
						type:"2"
					},
					{
						name:"修理厂入驻",
						icon:"/static/images/my/xlrz.svg",
						url:"/pages/my/repairJoin",
						type:"3",
						genre:""
					},
					{
						name:"商户入驻",
						icon:"/static/images/my/sjrz.svg",
						url:"/pages/my/storeJoin",
						type:"0"
					},
					{
						name:"更新用户信息",
						icon:"/static/images/my/user-refresh.svg",
						url:"",
						type:"refresh"
					},
					{
						name:"视频中心",
						icon:"/static/images/live/my-video-icon.svg",
						url:"/pages/live/myLiveCenter",
					},
					{
						name:"推广中心",
						icon:"/static/images/live/my-video-icon.svg",
						url:"/pages/live/share/index",
					},
				],
				hide_money:true,
				xieyi_name:"",
				rich_text:""
			};
		},
		computed:{
			...mapGetters(["userInfo","agreement"])
			
		},
		onShow() {
			console.log(this.$store.state.public_config)
			this.$setNotice()
			this.$getUser()
			
		},
		methods:{
			goTo,goSwitch,
			close(){
				this.$refs.xieyi.close()
			},
			navUrl(item){
				let that = this
				console.log(that.$store.state.public_config.basic)
				if(item.type === "refresh"){
					this.$getUser()
					return
				}
				if(item.type === 'phone'){
					let phone = ""
					for(let itm of that.$store.state.public_config.basic){
						if(itm.name === "phone"){
							phone = itm.value
						}
					}
					that.$callPhone(phone)
					return
				}
				if(item.name === '用户协议'){
					that.rich_text = that.agreement[2].value
					that.xieyi_name = item.name
					that.$refs.xieyi.open()
					return
				}
				if(item.name === '关于我们'){
					console.log(that.$store.state.public_config.basic)
					let str = ""
					for(let itm of that.$store.state.public_config.basic){
						if(itm.name === "about"){
							that.rich_text = itm.value
						}
					}
					that.xieyi_name = item.name
					that.$refs.xieyi.open()
					return
				}
				if(item.type){
					if(item.type === '3'){
						uni.showActionSheet({
							itemList:['维修','保养'],
							success(res) {
								console.log(res)
								item.genre = res.tapIndex
								that.selectIsJoin(item)
							}
						})
					}else{
						that.selectIsJoin(item)
					}
					return
				}
				if (item.name === '视频中心') {
					item.url += ('?user_id=' + that.userInfo.id)
				}
				that.goTo({url:item.url})
			},
			selectIsJoin(item,jso = false){
				let that = this
				let data = {type:item.type}
				if(item.type === '3'){
					data.genre = item.genre
				}
				that.util.postRequest({
					url:"v1/merchant/info",
					data:data
				}).then(res=>{
					console.log(res)
					if(res.data){
						if(jso){
							let json = JSON.stringify(res.data)
							that.$store.commit("changePageJson",json)
							that.goTo({url:"/pages/my/gasStation"})
						}else if(res.data.status !== 0){
							if(item.type === '3'){
								console.log(item,"fffff")
								that.goTo({url:(item.url+'?genre='+data.genre)})
							}else{
								that.goTo({url:item.url})
							}
						}else{
							that.goTo({url:"/pages/my/joinBack?type="+res.data.status})
						}
					}else{
						if(item.type === '3'){
							console.log(item,"fffff")
							that.goTo({url:(item.url+'?genre='+data.genre)})
						}else{
							that.goTo({url:item.url})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.bottom-btn-box{
		margin-top: 48upx;
		.item{
			width: 272upx;
			height: 96upx;
			border-radius: 128upx;
		}
		.btn1{
			border: 2upx solid #979797;
			color: #979797;
			margin-right: 10upx;
		}
		.btn2{
			background: #2567F3;
			color: #FFFFFF;
		}
	}
	.l-h-56{
		line-height: 58upx;
	}
	.xieyi-box{
		width: 750upx;
		background: #FFFFFF;
		border-radius: 40upx 40upx 0px 0px;
		padding: 20upx 38upx 42upx;
		position: relative;
		z-index: 133;
		.popup-scroll{
			width: 100%;
			height: 800upx;
			margin-bottom: 26upx;
			padding: 0 10upx;
		}
	}
	.service-box{
		width: 100%;
		.service-list-box{
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 28upx rgba(0, 0, 0, 0.06);
			border-radius: 16upx;
			padding-top: 34upx;
			.item{
				margin-bottom: 34upx;
				width: 25%;
				.service-icon{
					width: 72upx;
					height: 72upx;
					margin-bottom: 4upx;
				}
				.name{
					line-height: 28upx;
				}
			}
		}
		.thumb-title{
			width: 100%;
			padding: 0 32upx;
			margin-bottom: 24upx;
		}
	}
	.my-card-box{
		margin-bottom: 42upx;
		.item{
			height: 156upx;
			width: 336upx;
			padding: 30upx 34upx;
			background: #FFFFFF;
			box-shadow: 0px 8upx 28upx rgba(0, 0, 0, 0.06);
			border-radius: 16upx;
			.left{
				height: 100%;
				.title{
					margin-bottom: 16upx;
					line-height: 42upx;
				}
			}
			.gift-image{
				width: 76upx;
				height: 80upx;
			}
			.jiayou{
				height: 74upx;
				width: 88upx;
			}
		}
	}
	.my-money-box{
		background-image: url("@/static/images/my/my-money-svg.svg");
		background-size: 100% 100%;
		width: 100%;
		height: 172upx;
		margin-bottom: 42upx;
		.itme{
			height: 50%;
			width: 100%;
			padding: 0 32upx;
			.white-next{
				
			}
			.title{
				font-family: 'PangMenZhengDao-3';
				font-style: normal;
			}
			.money-right{
				.mar-12{
					margin-right: 12upx;
				}
			}
		}
	}
	.next-page-icon{
		width: 32upx;
		height: 32upx;
	}
	.my-order-view{
		width: 100%;
		padding: 24upx 32upx;
		margin-top: 32upx;
		background: #EAEFF5;
		border-radius: 16upx;
		margin-bottom: 24upx;
		
		.left{
			.title{
				margin-bottom: 4upx;
			}
		}
	}
	.user-info-box{
		width: 100%;
		.user-name-box{
			.name{
				margin-bottom: 10upx;
			}
		}
		.user-avatar{
			width: 112upx;
			height: 112upx;
			border-radius: 50%;
			margin-right: 24upx;
		}
	}
	.diog-next-icon{
		width: 18upx;
		height: 18upx;
		margin-left: 4upx;
	}
	.content{
		width: 750upx;
		padding: 0 30upx;
	}
</style>
